<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        添加报价单
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../../css/main.css" media="all">
    <script type="text/javascript" src="../../../../lib/loading/okLoading.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../../../lib/layui/css/layui_2.5.7.css">

</head>
<style>
    .layui-form-label {
        width: 150px !important;
    }
    .tast{
        margin-left: 150px;
    }
</style>

<body>
<div class="x-nav">
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
                                                                        style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body" id="app">
    <form class="layui-form layui-form-pane" id="add">
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">

                <h5 style="margin-bottom: 20px;"><b>基本信息</b></h5>

                <div class="layui-form-item">
                    <label class="layui-form-label"> <span class='x-red'>*</span>选择关联项目</label>
                    <div style="width: 65%" class="layui-input-inline">
                        <button @click="xzglxm" style="width: auto;height: auto;margin-top: 1%;margin-left: 20px;" type="button"
                                class="btn btn-info  btn-xs">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            选择关联项目
                        </button>

                    </div>
                </div>

                <div v-if="projectData != ''" class="layui-card-body">
                    <input  autocomplete="off"  type="hidden" name="fistId" placeholder="甲方（需方）id" v-model="projectData.customerId" class="layui-input" disabled='disabled'>
                    <div class="layui-form-item">

                        <input  autocomplete="off"  type="hidden" name="projectId" placeholder="项目 id" v-model="projectData.id" class="layui-input" disabled='disabled'>
                        <label class="layui-form-label" style="margin-left: -1%"><span class='x-red'>*</span>项目名称</label>
                        <div style="width: 30.5%" class="layui-input-inline">
                            <input  autocomplete="off"  type="text" name="projectName" lay-verify="required" placeholder="项目名称" v-model="projectData.name" class="layui-input" disabled='disabled'>
                        </div>


                        <label class="layui-form-label tast"><span class='x-red'>*</span>甲方名称</label>
                        <div style="width: 30.5%" class="layui-input-inline">
                            <input  autocomplete="off"  type="text" name="fistName" lay-verify="required"  placeholder="甲方名称" v-model="projectData.customerName" class="layui-input" disabled='disabled'>
                        </div>
                    </div>
                </div>

                <input  autocomplete="off"  type="hidden" name="quotationNameId" placeholder="报价人 id"  v-model="getRequest.quotationNameId" class="layui-input">
                <div class="layui-form-item">
                    <label class="layui-form-label">报价人</label>
                    <div style="width: 30%" class="layui-input-inline">
                        <input  autocomplete="off"  type="text" name="quotationName" placeholder="报价人" v-model="getRequest.quotationName" class="layui-input" disabled='disabled'>
                    </div>

                    <label class="layui-form-label tast">乙方名称</label>
                    <div style="width: 30%" class="layui-input-inline">
                        <input  autocomplete="off"  type="text" name="secondName" placeholder="乙方名称"  v-model="getRequest.secondName" class="layui-input" disabled='disabled'>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">备注信息</label>
                    <div style="width: 30%" class="layui-input-inline">
                        <textarea type="text" style="width: 265%;height: 190px;" name="remake" placeholder="添加备注信息" class="layui-input"></textarea>
                    </div>
                </div>

                <h5 style="margin-bottom: 20px;margin-top: 20px;"><b>物料信息</b></h5>
                <div class="layui-form-item">
                    <label class="layui-form-label"> <span class='x-red'>*</span>选择配件</label>
                    <div style="width: 65%" class="layui-input-inline">
                        <button @click="xzpj" style="width: auto;height: auto;margin-top: 1%;margin-left: 20px;" type="button"
                                class="btn btn-info  btn-xs">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            选择配件
                        </button>
                    </div>
                </div>
                <hr>
                <div v-if="partsData != ''" class="layui-card-body">
                    <div class="table-responsive">
                        <table class="table table-hover"
                               v-for="(item,index) in partsData">
                            <tbody>
                            <tr >
                                <td style="width: 15%">配件名称: {{item.partsName}}</td>
                                <td style="width: 5%">数量:</td>
                                <td style="width: 8%"><input style="width: 100%" @change="editPartsNumber($event,item,index)" type="text" oninput="value=value.replace(/[^\d]/g,'')"></td>
<!--                                <td style="width: 8%">数量：{{item.partsNumber}}</td>-->
                                <td style="width: 9.5%">手动指导价：{{item.guideprice}}</td>
                                <td style="width: 11.5%">自动指导价：{{item.guidepriceMath}}</td>
                                <td style="width: 5%">配件总报价:</td>
                                <td style="width: 8%"><input style="width: 100%" @change="editAllGuideprice($event,item,index)" type="text" onkeyup="clearNoNum(this)"></td>
<!--                                <td style="width: 15%">配件总报价：{{item.allGuideprice}}</td>-->
                                <td style="width: 15%">安装指导单价：{{item.installPrice}}</td>
                                <td style="width: 5%">安装总报价:</td>
                                <td style="width: 8%"><input style="width: 100%" @change="editInstallAllprice($event,item,index)" type="text" onkeyup="clearNoNum(this)"></td>
<!--                                <td style="width: 15%">安装总报价：{{item.installAllprice}}</td>-->
                                <td style="width: 8%">总报价：{{item.allPrice}}</td>
                                <td>
<!--                                    <div style="padding: 4px 5px;" @click="edit(item,index)"-->
<!--                                         class="btn btn-primary btn-xs wauto">-->
<!--                                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>-->
<!--                                    </div>-->

                                    <div style="padding: 4px 5px;" @click="del(index)"
                                         class="btn btn-danger btn-xs wauto">
                                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                </hr>

                <div style="text-align: center" class="layui-form-item">
                    <button class="layui-btn" type="button" lay-filter="sub" lay-submit="sub">
                        保存
                    </button>
                </div>
                <div style="height:20px;"></div>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="../../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../../js/myAjax.js"></script>
<script type="text/javascript" src="../../../../js/pub.js"></script>
<script src="../../../../lib/layui/layui2.5.7.js" charset="utf-8"></script>
<script src="../../../../js/x-layui.js" charset="utf-8"></script>
<script src="../../../../js/vue.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
    layui.use(['element', 'layer', 'form', 'laydate'], function () {
        $ = layui.jquery;//jquery
        lement = layui.element();//面包导航
        layer = layui.layer;//弹出层
        laydate = layui.laydate;//日期插件
        form = layui.form;
        okLoading.close($);
    })
</script>
<script>

    var vm = new Vue({
        el: "#app",
        data: {
            getRequest: {},
            partsData:[],
            projectData:{
            }
        },
        created() {
            let request1 = {
                url: 'kf/quotation/getQuotation',
                data: {
                    userId: $userId,
                },
                method: "get",
            };
            sendRequest(request1, (res) => {
                this.getRequest = res.data;
            });
        },
        methods: {
            editPartsNumber:function(event,item,index){
                item.partsNumber = $(event.target).val();
                this.partsData.splice(index, 1, item)

            },
            editAllGuideprice:function(event,item,index){
                item.allGuideprice = $(event.target).val();
                if(item.installAllprice == null || item.installAllprice == ""){
                    item.allPrice = accAdd(item.allGuideprice,0);
                }else{
                    item.allPrice = accAdd(item.allGuideprice,item.installAllprice);
                }
                this.partsData.splice(index, 1, item)

            },
            editInstallAllprice:function(event,item,index){
                item.installAllprice = $(event.target).val();
                if(item.allGuideprice == null || item.allGuideprice == ""){
                    item.allPrice = accAdd(0,item.installAllprice);
                }else{
                    item.allPrice = accAdd(item.allGuideprice,item.installAllprice);
                }
                this.partsData.splice(index, 1, item)

            },
            edit(item, index) {
                localStorage.setItem("quotation_edit_parts", JSON.stringify(item));
                layer.open({
                    title: '请选择',
                    type: 2,
                    btnAlign: 'c',
                    area: [700+'px', 440+'px'],
                    content: 'quotation_add_parts_edit_num.html',
                    btn: ['确定', '关闭'],
                    yes: (i, layero) => {
                        let qep = JSON.parse(localStorage.getItem('quotation_edit_parts'));
                        qep.allPrice = accAdd(qep.allGuideprice,qep.installAllprice);
                        this.partsData.splice(index, 1, qep);
                        let cp = JSON.parse(localStorage.getItem("quotation_quotation_choose_parts"));
                        cp[index] = JSON.parse(localStorage.getItem('quotation_edit_parts'));
                        localStorage.setItem("quotation_quotation_choose_parts",JSON.stringify(cp));
                        layer.close(i);
                    }

                });

            },
            del(index) {
                this.partsData.splice(index, 1);
                localStorage.setItem("quotation_quotation_choose_parts", JSON.stringify(this.partsData) || '[]');
            },
            xzpj() {
                layer.open({
                    title: '选择配件',
                    type: 2,
                    btnAlign: 'c',
                    area: ['80%', '80%'],
                    content: '../../material_information/call/quotation_quotation_choose_parts.html',
                    btn: ['确定'],
                    yes: (i, layero) => {
                        let cp = JSON.parse(localStorage.getItem("quotation_quotation_choose_parts"))
                        $.each(cp,function (index,item){
                            if(item.installPrice === "" || item.installPrice === undefined){
                                item.installPrice = "0";
                            }
                        })
                        this.partsData = cp;
                        layer.close(i);
                    }
                });

            },
            xzglxm(){
                layer.open({
                    title: '选择关联项目',
                    type: 2,
                    btnAlign: 'c',
                    area: ['80%', '80%'],
                    content: 'quotation_select_project.html',
                    end: (i, layero) => {
                        let cp = JSON.parse(localStorage.getItem("quotation_select_project"))
                        this.projectData = cp[0];
                        layer.close(i);
                    },

                });
            }
        }
    })


    layui.use(['laydate', 'form', 'layer'],
        function () {
            var form = layui.form;
            var layer = layui.layer;

            //监听审批提交
            form.on('submit(sub)',
                function (data) {
                    let form = data.field;
                    form.userId = $userId;
                    let kfBuyPartsList = [];
                    let maybe = 0;
                    $.each(vm.partsData, function (index, item) {
                        kfBuyPartsList.push({
                            partsId : item.id,
                            partsName : item.partsName,
                            specification : item.specification,
                            partsNum : item.partsNum,
                            partsNumber : item.partsNumber,
                            partsPrice : item.newPrice,
                            guideprice : item.guideprice,
                            allGuideprice : item.allGuideprice,
                            installPrice : item.installPrice,
                            installAllprice : item.installAllprice,
                            allPrice : item.allPrice,
                            partsImg : item.partsImg,
                        })
                        if(item.partsNum === "" || item.partsNum == null || item.allGuideprice === "" || item.allGuideprice == null || item.installAllprice === "" || item.installAllprice == null){
                            maybe++;
                        }
                    });
                    if(maybe > 0){
                        layer.alert("配件信息未全部填写", {
                            icon: 5
                        });
                        return false;
                    }
                    form.kfBuyPartsList = JSON.stringify(kfBuyPartsList);

                    if (kfBuyPartsList == '') {
                        layer.alert("配件不能为空", {
                            icon: 5
                        });
                        return false;

                    }

                    let request = {
                        url: 'kf/quotation/addQuotation',
                        data: form,
                        method: "POST",
                    };

                    sendRequest(request, (data) => {
                        console.log(data);
                        if (data.code === 0) {
                            layer.alert("操作成功", {
                                    icon: 6
                                },
                                function () {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                    parent.reload();

                                });
                        } else {
                            layer.alert(data.msg, {
                                icon: 5
                            })
                        }
                    });
                    return false;
                });
        });

    function accAdd(arg1, arg2) {
        var r1, r2, m, c;
        try {
            r1 = arg1.toString().split(".")[1].length;
        }
        catch (e) {
            r1 = 0;
        }
        try {
            r2 = arg2.toString().split(".")[1].length;
        }
        catch (e) {
            r2 = 0;
        }
        c = Math.abs(r1 - r2);
        m = Math.pow(10, Math.max(r1, r2));
        if (c > 0) {
            var cm = Math.pow(10, c);
            if (r1 > r2) {
                arg1 = Number(arg1.toString().replace(".", ""));
                arg2 = Number(arg2.toString().replace(".", "")) * cm;
            } else {
                arg1 = Number(arg1.toString().replace(".", "")) * cm;
                arg2 = Number(arg2.toString().replace(".", ""));
            }
        } else {
            arg1 = Number(arg1.toString().replace(".", ""));
            arg2 = Number(arg2.toString().replace(".", ""));
        }
        return (arg1 + arg2) / m;
    }

    function clearNoNum(obj){
        obj.value = obj.value.replace(/[^\d.]/g,"");
        obj.value = obj.value.replace(/\.{2,}/g,".");
        obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
        if(obj.value.indexOf(".")< 0 && obj.value !=""){
            obj.value= parseFloat(obj.value);
        }
    }

</script>

</body>

</html>
